<template>
  <div class="codeObfuscation">
    <textarea
      placeholder="请输入需要混淆的代码"
      @input="codeInput"
      v-model="codeStr"
    ></textarea>
    <div class="checkbox">
      <input type="checkbox" v-model="isChecked" @change="codeInput" />
      <label for="checkbox">是否使用eval</label>
    </div>
    <textarea placeholder="转换结果" v-model="convertedCode"></textarea>
  </div>
</template>

<script>
import { charMap } from "@/utils/util.js";
export default {
  name: "codeObfuscation",
  props: {},
  data() {
    return {
      codeStr: "",
      convertedCode: "",
      isChecked: false
    };
  },
  methods: {
    convertToCharCode(str) {
      let result = "";
      str = str.replace(/[\r\n]/g, "");
      for (const char of str) {
        if (result) result += "+";
        if (charMap[char]) {
          result += `(${charMap[char]} + [])`;
        } else {
          result += `'${char}'`;
        }
      }
      if (this.isChecked) {
        result = charMap["eval"] + `(${result})`;
      }
      return result;
    },
    codeInput() {
      this.convertedCode = this.convertToCharCode(this.codeStr);
    }
  }
};
</script>

<style scoped>
.codeObfuscation {
  display: flex;
  flex-direction: column;
}
.codeObfuscation .checkbox {
  margin-bottom: 20px;
}
.codeObfuscation textarea {
  margin: auto;
  width: 90%;
  height: 300px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>
